<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
	</view>

	<view class="wrap">


		<view>
			<lib-btn @onClick="()=>corsHttpTest()">cors请求测试</lib-btn>
		</view>

		<view>
			<lib-btn @onClick="()=>eventTest()">事件测试</lib-btn>
		</view>


		<view>
			修改主题色：
			<lib-btn @onClick="()=>changePrimary('#ff6600')">橙色</lib-btn>
			<lib-btn @onClick="()=>changePrimary('#014C69')">蓝色</lib-btn>
		</view>

		<view>按钮样式</view>
		<view>
			<lib-btn>默认按钮</lib-btn>
			<lib-btn type="primary">主题按钮</lib-btn>
			<lib-btn type="border">边框按钮</lib-btn>
			<lib-btn type="danger">警告按钮</lib-btn>
			<lib-btn type="success">成功按钮</lib-btn>
			<lib-btn type="success" disabled>禁用按钮</lib-btn>
		</view>

		<view>按钮大小</view>
		<view>
			<lib-btn>默认大小</lib-btn>
			<lib-btn type="primary" size="l">大按钮</lib-btn>
			<lib-btn type="border" size="m">中按钮</lib-btn>
			<lib-btn type="danger" size="s">小按钮</lib-btn>
		</view>

		<view>block 按钮</view>
		<view>
			<lib-btn type="primary" block>主题按钮</lib-btn>
		</view>

		<view>form</view>
		<view>
			<lib-selector-input :formControl="form.getControl('a')" />
		</view>

		<view>
			<lib-form-group :formGroup="form" />
		</view>

		<view>
			<lib-btn @onClick="()=>submit()" type="border">提交</lib-btn>
		</view>

		<view>
			<lib-btn @onClick="()=>openModal()" type="border">打开modal</lib-btn>
		</view>

		<view>文字</view>
		<view>
			<lib-text>默认</lib-text>
			<lib-text type="primary">主题</lib-text>
			<lib-text type="danger">警告</lib-text>
			<lib-text type="success">成功</lib-text>
			<lib-text type="primary" :style="{'font-size': '20px'}">主题style</lib-text>
			<text>常规</text>
		</view>
		
		<view>1</view>
		<view>2</view>
		<view>3</view>
		<view>4</view>
		<view>5</view>

	</view>

	<lib-finger-paint :isShow="true" />

	<lib-modal v-model="showModal" label="demo" outer-class="abc" :outer-style="{width:'80%'}">
		<template v-slot:header>
			<view class="modal-header">header</view>
		</template>
		<template v-slot:content>
			<view class="modal-content">content</view>
		</template>
		<template v-slot:footer>
			<view class="modal-footer">
				<lib-btn type="primary">按钮</lib-btn>
			</view>
		</template>
	</lib-modal>




</template>

<script>
	import Lib from "@/uni_modules/lib";
	const demoHttp = new Lib.Http({
		base: 'https://www.abc.com/'
	});
	const fb = Lib.form.FormBuilder;

	const form = fb.group({
		a: fb.control({
			placeholder: '请输入用户名',
			label: '用户名',
			labelStyle: {
				width: '100px',
			},
			selectorStyle: {
				height: '50px',
			},
			selector: 'input',
			allowClear: true,
			value: 1
		}),
		b: fb.control({
			label: '密码',
			labelStyle: {
				width: '100px',
			},
			selector: 'password',
			value: 2
		}),
		c: fb.control({
			label: '性别',
			labelStyle: {
				width: '100px',
			},
			selector: 'picker',
			options: [{
				label: '男',
				value: 1
			}, {
				label: '女',
				value: 0
			}],
			value: 1,
		}),
		d: fb.control({
			label: '留言',
			labelStyle: {
				width: '100px',
			},
			selector: 'textarea',
			placeholder: '123',
			value: '',
		}),
		a1: fb.control({
			label: '学历',
			labelStyle: {
				width: '100px',
			},
			selector: 'select',
			options: [{
				label: '大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大专大',
				value: 1
			}, {
				label: '本科',
				value: 2
			}, {
				label: '研究生',
				value: 3
			}],
			value: 1,
		}),
	});

	export default {
		components: {},
		data() {
			return {
				// pdfUrl: '/static/pdf/demo.pdf',
				pdfUrl: 'https://scp-erp.aidingyi.cn/uploadfiles/scp-xml/data/f8c024a209728e112c8d57cb652b15ef1cdda7eb.pdf',
				isMobale: Lib.Platform.isH5Mobile,
				form: form,
				showModal: false,
			}
		},
		async mounted() {
			Lib.Event.subscribe('test-event', (a) => {
				const aaa = `test-event接收到的参数:${a}`;
				Lib.Msg.alert(aaa);
			});
		},
		methods: {
			testMsg() {
				Lib.Msg.alert(123)
			},
			pageChange(currentPage) {

			},
			back() {
				uni.navigateBack({});
			},
			changePrimary(primaryColor) {
				Lib.Theme.setTheme({
					primary: primaryColor
				});
			},
			async corsHttpTest() {
				const res = await demoHttp.request({
					// url: `https://scp-erp.aidingyi.cn/mapp_port/menu.php?v=2&token=e9f91231a07772d2f78b83001dba0adfce96cbf4&username=202401&SAAS_DB_AUTH=&Super_Pass=1&Mobile_Local_Port=`;
					uri: 'data?a=1&b=2',
					params: {
						c: 3,
						d: 4,
						a: 5
					},
				});
				console.log(res);
			},
			eventTest() {
				Lib.Event.publish('test-event', 123);
			},
			submit() {
				console.log(this.form);
			},
			openModal() {
				this.showModal = true;
			},
			openFingerPaint() {

			},
		},
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.modal-header {
		background-color: lightblue;
	}

	.modal-content {
		background-color: lightcoral;
		height: 1000px;
	}

	.modal-footer {
		background-color: lightgreen;
	}
</style>